<template>
	<view class="shopping-cart">
		<!-- 购物车标题 -->
		<view class="header">购物车</view>

		<!-- 商品列表 -->
		<view class="product-list">
			<view class="product" v-for="(item, index) in cartItems" :key="index">
				<view class="product-info">
					<!-- 商品名称 -->
					<view>{{ item.name }}</view>
					<!-- 商品价格 -->
					<view class="product-price">价格: ￥{{ item.price.toFixed(2) }}</view>
					<view class="quantity-controls">
						<!-- 减少商品数量 -->
						<view @click="decreaseQuantity(item)">-</view>
						<!-- 输入框显示商品数量 -->
						<input type="text" v-model="item.quantity" />
						<!-- 增加商品数量 -->
						<view @click="increaseQuantity(item)">+</view>
					</view>
				</view>
				<!-- 计算小计 -->
				<view class="product-total">小计: ￥{{ (item.price * item.quantity).toFixed(2) }}</view>
				<!-- 删除商品按钮 -->
				<view class="delete-button" @click="removeItem(index)">删除</view>
			</view>
		</view>

		<!-- 购物车统计信息 -->
		<view class="summary">
			<view>总数量: {{ totalQuantity }}</view>
			<view>总价格: ￥{{ totalPrice.toFixed(2) }}</view>
		</view>

		<!-- 添加商品按钮 -->
		<view class="add-product">
			<view @click="addProduct">添加商品</view>
		</view>

		<!-- 结算按钮 -->
		<view class="checkout-button" @click="checkout">去结算</view>
	</view>
</template>



<script>
	export default {
		data() {
			return {
				// 存储购物车商品的数组
				cartItems: [],
			};
		},
		computed: {
			// 计算购物车中商品的总数量
			totalQuantity() {
				return this.cartItems.reduce((total, item) => total + item.quantity, 0);
			},
			// 计算购物车中商品的总价格
			totalPrice() {
				return this.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
			},
		},
		methods: {
			// 添加商品到购物车
			addProduct() {
				const newItem = {
					name: `商品${this.cartItems.length + 1}`, // 商品名称
					price: parseFloat((Math.random() * 100 + 1).toFixed(2)), // 随机生成价格并确保是数字
					quantity: 1, // 初始数量为1
				};
				this.cartItems.push(newItem); // 将新商品添加到购物车
			},
			// 增加商品数量
			increaseQuantity(item) {
				item.quantity++;
			},
			// 减少商品数量
			decreaseQuantity(item) {
				if (item.quantity > 1) {
					item.quantity--;
				}
			},
			// 从购物车中删除商品
			removeItem(index) {
				this.cartItems.splice(index, 1); // 从购物车中删除指定索引的商品
			},
			// 结算操作
			checkout() {
				console.log('去结算', this.cartItems); // 输出购物车商品信息（可添加实际结算逻辑）
			},
		},
		mounted() {
			this.cartItems = []; // 组件挂载时初始化购物车为空
		},
	};
</script>


<style lang='scss' scoped>
	@import './cart.css'
</style>